import { Component } from 'react'

export default class addServices extends Component {
    constructor(props) {
        super(props)
        this.state = {
            serviceName: '',
            services: []
        }
    }
    addServices(e){
        var _this=this
        function Fun(){
            let list= _this.state.services

            list.push(_this.state.serviceName)
            _this.setState({
                services: list
                // 利用三点展开符进行数组的数据推送
                // services:[...this.state.services,this.state.serviceName]
            })
            _this.setState({
                    serviceName: ''
                })
        }
        // 如果服务内容不为空
        // 且是鼠标点击或者是键盘enter输入
        if(e.type=='click'||e.keyCode===13&&this.state.serviceName){
            Fun()
            return
        }
    }
    inputServiceName(e) {
        this.setState({
            serviceName: e.target.value
        })
    }
    // bind改变默认指向后，其
    deleteServices(data,e) {
        
    //   console.log(this.state.services.splice(data,data+1));
    let list=this.state.services
    list.splice(data,1)
      this.setState({
         services:list
      })
      
    }

    render() {
        return (
            <div>
                <p>这是增加服务的组件</p>
                <div>
                    <input value={this.state.serviceName} onKeyUp={this.addServices.bind(this)} onChange={this.inputServiceName.bind(this)} placeholder='请输入服务名称' type="text" />
                    <button onClick={this.addServices.bind(this)}>增加</button>
                </div>
                {
                    this.state.services.length == 0 ?

                        <p>还没有提供任何的服务</p> :
                        <ul>
                            {
                                this.state.services.map((item, index) => {
                                    return <li key={index}>{item}<button onClick={this.deleteServices.bind(this,index)}>删除</button></li>
                                    // 中间不能有其他任何的元素
                                    // return <li dangerouslySetInnerHTML={{__html:item}} key={index}></li>
                                })
                            }
                        </ul>

                    // <p>您有一个服务</p>
                }
            </div>
        )
    }
}